<template>
  <div class="shopping-classify">
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">智慧园区后台管理</div>
        <el-form ref="form" :model="login" label-width="80px">
          <el-form-item label="账号">
            <el-input
              placeholder="请输入账号"
              v-model="login.empTel"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              placeholder="请输入密码"
              v-model="login.empPawd"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="tologin" class="xx"
              >登录</el-button
            >
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      login: {
        empTel: "admin",
        empPawd: "admin",
      },
    };
  },
  methods: {
    tologin() {
      this.$axios
        .post("/admins/login", this.$qs.stringify(this.login))
        .then((res) => {
          if (res.data.code == 200) {
            sessionStorage.setItem("authorization",res.data.data.token);
            this.$router.push("Index");
            this.$router.push("Zong");
          } else {
            this.$message.error("用户名或密码错误");
          }
        })
        .catch((error) => {
          this.$message.error("出错了,请稍后重试");
        });
    },
  },
};
</script>
<style scoped>
.xx {
  margin-left: -60px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 230px auto;
  width: 480px;
  background-color: rgba(255, 255, 255, 0.3);
}
.bgBackground {
  width: 100%;
  height: 100%;
}
.shopping-classify {
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-image: url(../assets/ddd.png);
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: fixed;
}
</style>
